<template>
  <a-spin size="large" :spinning="loading">
      <a-card title="市占率达成分布" :headStyle="{ fontWeight: 600 }">
        <div class="marketshareRoot">
          <div class="title1">全国概述</div>
          <div class="formBg">
            <div class="grid">
              <a-row>
                <a-col :span="2">
                  <div class="label">时间:</div>
                </a-col>
                <a-col :span="22">
                  <a-row>
                    <a-col :span="8">
                      <a-col :span="6">
                        <div class="label r">年:</div>
                      </a-col>
                      <a-col :span="18">
                        <a-select v-model="selYear" class="select">
                          <a-select-option v-for="(r,i) in years" :value="r.value" :key="i">
                            {{r.text}}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-col>
                    <a-col :span="8">
                      <a-col :span="6">
                        <div class="label r">月:</div>
                      </a-col>
                      <a-col :span="18">
                        <a-select v-model="selMonth" class="select">
                          <a-select-option v-for="(r,i) in months" :value="r.value" :key="i">
                            {{r.text}}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </div>
            <div class="grid">
              <a-row>
                <a-col :span="2">
                  <div class="label">产品:</div>
                </a-col>
                <a-col :span="22">
                  <a-row>
                    <a-col :span="8">
                      <a-col :span="6">
                        <div class="label r">车系:</div>
                      </a-col>
                      <a-col :span="18">
                        <a-select class="select">
                        </a-select>
                      </a-col>
                    </a-col>
                    <a-col :span="16">
                       <a-button class="btn" type="primary" @click="searchPage">查询</a-button>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="title2">全国概述</div>
          <div class="msg">
<b class="blue">省观察</b>一总共<b class="blue">31</b>个省，其中 <b class="green">绿</b>：<b class="green">13</b>个（<b class="green">不变</b>）；<b class="yellow">黄</b>：<b class="yellow">4</b>个（<b class="yellow">+1</b>）；<b class="red">红</b>：<b class="red">14</b>个（<b class="red">-1</b>）<br>
{{showTime}}较{{showTimeLast}}<b class="blue">1</b>个省份市占率状态<b class="unl">好转</b>。<b class="blue">1</b>个省份由黄/红变绿，为<b class="blue">陕西</b>。<br>
{{showTime}}较{{showTimeLast}}<b class="blue">1</b>个省份市占率状态<b class="unl">变差</b>。<b class="blue">1</b>个省份由绿变黄，为<b class="blue">山东</b>。<br>
城市观察—总共341个市，<b class="green">绿</b>：<b class="green">169</b>个（<b class="green">+47</b>）；<b class="yellow">黄</b>：<b class="yellow">18</b>个（<b class="yellow">-14</b>）；<b class="red">红</b>：<b class="red">187</b>个（<b class="red">-33</b>）<br>
          </div>
          <div class="formBg">
            <div class="grid">
              <table1
                :data="testTableData"
              ></table1>
            </div>
          </div>
          
          <div class="title2">{{showTime}}青山绿水一<span>全国</span></div>
          <div style="width:100%;float:left;">
            <a-row>
              <a-col :span="4">
                <table2
                  :data="testChinaTableData1"
                ></table2>
              </a-col>
              <a-col :span="20" style="padding-left:20px;">
                <div class="chinaMapBg">
                  <china ref="chinaMap" :data="testChinaData"></china>
                  <div class="chinaMsg">
                    <div>
                      <div class="tit">经销商的业绩达成情况</div>
                      <div class="content">
  1、第一个百分比数字表示当月零售达成率<br>
  2、后边的”+”“-”号，分别表示N-6、N-5…N-1月的业绩达成情况，”+”达成零售目标，”-”表示未达成<br>
  3、第二个百分比数字表示上一考核周期考核单元的零售积分达成率
                      </div>
                    </div>
                    <div>
                      <div class="tit">省旁边的箭头说明</div>
                      <div class="content">
  <b>颜色</b>-绿色表示该地区上一次的数据状态为绿色，如上次状态为黄色，则箭头为黄<br>
  <b>箭头方向</b>-向下说明状态是下滑的，反之则是提升的
                      </div>
                    </div>
                  </div>
                </div>
              </a-col>
              <a-col :span="24">
                <table3
                  :year="queryYear"
                  :month="queryMonth"
                  :data="testChinaTableData2"
                ></table3>
              </a-col>
            </a-row>
          </div>
          

          <div class="hr"></div>

          <div class="title2">全国攻坚城市概览</div>
          <div class="msg">
<b class="blue">攻坚成果</b>一总共<b class="blue">47</b>个市，<b class="green">绿</b>：<b class="green">14</b>个（<b class="green">+1</b>）；<b class="yellow">黄</b>：<b class="yellow">6</b>个（<b class="yellow">-1</b>）；<b class="red">红</b>：<b class="red">27</b>个（<b class="red">不变</b>）<br>
{{showTime}}较{{showTimeLast}}<b class="blue">6</b>个城市市占率状态<b class="unl">好转</b>。<b class="blue">4</b>个市由黄/红变绿，为<b class="blue">淮安、沈阳、榆林、西安</b>。<br>
{{showTime}}较{{showTimeLast}}<b class="blue">8</b>个城市市占率状态<b class="unl">变差</b>。<b class="blue">6</b>个市由绿/黄变红，为<b class="blue">武汉、邯郸、呼和浩特、汉中、遵义、内江</b>。 <b class="blue">2</b>个市由绿变黄，分别为：<b class="blue">咸阳、巴中</b>。
          </div>
          <table4
            :year="queryYear"
            :month="queryMonth"
            :data="testCityData0"
          ></table4>

          <div class="formBg">
            <div class="grid t2" style="margin-top:0;">
              <a-row>
                <a-col :span="2">
                  <div class="label">区域:</div>
                </a-col>
                <a-col :span="22">
                  <a-row>
                    <a-col :span="8">
                      <a-col :span="6">
                        <div class="label r">省份:</div>
                      </a-col>
                      <a-col :span="18">
                        <a-select class="select" v-model="selProvince">
                          <a-select-option v-for="(r,i) in provincesCombo" :value="r.value" :key="i">
                            {{r.text}}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-col>
                    <a-col :span="16">
                      <a-button class="btn" type="primary" @click="searchProvince">查询</a-button>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="title2">{{showTime}}青山绿水一<span>{{showArea}}</span></div>
          <div style="width:100%;float:left;">
            <a-row>
              <a-col :span="7" style="padding-right:20px;">
                <table5
                  :data="testCityData1"
                ></table5>
                <div class="msg" style="margin-bottom:0;">
                  <a-icon type="star" theme="filled" class="star" />代表攻坚城市
                </div>
              </a-col>
              <a-col :span="17">
                <a-row style="padding-bottom:20px;">
                  <a-col :span="15" style="height:370px;background:#f2f2f2;">
                    <province ref="provinceMap" :name="queryProvince"></province>
                  </a-col>
                  <a-col :span="9" style="height:370px;background:#f2f2f2;">
                    <div class="provinceMsg">
                      <div>
                        <div class="tit">经销商业绩达成情况</div>
                        <div class="content">
  1、第一个百分比数字表示当月零售达成率；<br>
  2、后面的“+”定义为当月达成率大于等于100%，“-”定义为当月达成率小于100%。<br>
  3、第二个百分比数字表示上一考核周期考核单元的零售积分达成率。
                        </div>
                      </div>
                      <div>
                        <div class="tit">城市旁边的箭头说明</div>
                        <div class="content">
  <b>颜色</b>：表示该地区市占率在上月的颜色状态，如上次状态为黄色，则箭头为黄色；<br>
  <b>箭头方向</b>：表示变化。
                        </div>
                      </div>
                    </div>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <table6
                      :year="queryYear"
                      :month="queryMonth"
                      :data="testCityData2"
                    ></table6>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </div>
          
        </div>
      </a-card>
    </a-spin>
</template>

<script>
import table1 from './components/table1.vue'
import china from './components/china.vue'
import table2 from './components/table2.vue'
import table3 from './components/table3.vue'
import table4 from './components/table4.vue'
import table5 from './components/table5.vue'
import province from './components/province.vue'
import table6 from './components/table6.vue'

export default {
  name: 'marketsharePage',
  components: {
    table1,
    china,
    table2,
    table3,
    table4,
    table5,
    province,
    table6
  },
  computed:{
    years(){
      var data = [];
      var nowYear = new Date().getFullYear();
      for(var i=nowYear-10;i<=nowYear+10;i++){
        data.push({
          value:i,
          text:i+'年'
        })
      }
      return data;
    },
    months(){
      var data = [];
      for(var i=1;i<=12;i++){
        data.push({
          value:i,
          text:i+'月'
        })
      }
      return data;
    },
    showTime(){
      var str = '';
      if(this.queryYear!=new Date().getFullYear()){
        str+=this.queryYear+'年'
      }
      str+=this.queryMonth+'月'
      return str;
    },
    showTimeLast(){
      var str = '';
      var year = this.queryYear;
      var month = this.queryMonth-1;
      if(month==0){
        month = 12;
        year -= 1;
      }
      if(year!=new Date().getFullYear()){
        str+=year+'年'
      }
      str+=month+'月'
      return str;
    },
    showArea(){
      for(var i=0;i<this.provinces.length;i++){
        if(this.provinces[i]==this.queryProvince){
          return this.provincesText[i];
        }
      }
    },
    testTableData(){
      return [{
        name:'全国',
        hao1:54,
        hao2:12,
        huai1:9,
        huai2:5
      },{
        name:'华东大区',
        hao1:0,
        hao2:12,
        huai1:0,
        huai2:11
      },{
        name:'华南大区',
        hao1:11,
        hao2:22,
        huai1:33,
        huai2:44
      },{
        name:'东南大区',
        hao1:11,
        hao2:22,
        huai1:33,
        huai2:44
      },{
        name:'西南大区',
        hao1:11,
        hao2:22,
        huai1:33,
        huai2:44
      },{
        name:'西北大区',
        hao1:11,
        hao2:22,
        huai1:33,
        huai2:44
      },{
        name:'华北大区',
        hao1:11,
        hao2:22,
        huai1:33,
        huai2:44
      },{
        name:'东北大区',
        hao1:11,
        hao2:22,
        huai1:33,
        huai2:44
      },{
        name:'华中大区',
        hao1:11,
        hao2:22,
        huai1:33,
        huai2:44
      }];
    },
    testChinaData(){
      var qgNum = 80;
      var temp = [];
      for(var i=0;i<this.provincesText.length;i++){
        var num = parseInt(Math.random()*140-20);
        if(i==0){
          num=71
        }
        if(i==1){
          num=72
        }
        if(i==2){
          num=73
        }
        if(i==3){
          num=79
        }
        if(i==4){
          num=80
        }
        if(i==5){
          num=100
        }
        if(i==6){
          num=101
        }
        temp.push({
          name:this.provincesText[i],
          num:num,
          value:num
        });
      }
      return {
        qgNum:qgNum,
        data:temp
      };
    },
    testChinaTableData1(){
      var temp = this.provincesText.map(function(item){
        var num = parseInt(Math.random()*60+40)
        var upDown = parseInt(Math.random()*4);
        return {
          name:item,
          num:num,
          str:num+'%----+-',
          upDown:upDown,
        }
      })
      temp.sort(function(a,b){
        return a.num-b.num;
      })
      temp.unshift({
        name:'全国',
        num:95,
        str:'95%----+-',
        upDown:-1,
      })
      return temp;
    },
    testChinaTableData2(){
      var keys13=['ytd','one','two','thr','for','fiv','six','svn','eit','nine','ten','elv','twl'];
      var temp = this.provincesText.map(function(item){
        var tempObj = {
          name:item
        };
        
        for(var i=0;i<keys13.length;i++){
          tempObj[keys13[i]]=parseInt(Math.random()*40+60);
        }
        return tempObj
      });

      var qgObj = {
        name:'全国'
      };
      
      for(var i=0;i<keys13.length;i++){
        qgObj[keys13[i]]=parseInt(Math.random()*40+60);
      }
      temp.unshift(qgObj)

      return temp;
    },
    testCityData0(){
      var keys13=['ytd','one','two','thr','for','fiv','six','svn','eit','nine','ten','elv','twl'];
      var dqs = ['E','M','N'];
      var citys = [
        '淮安市','济南市','济宁市','临沂市','芜湖市',
        '合肥市','阜阳市','新乡市','洛阳市','周口市',
        '郑州市','平顶山市','武汉市','恩施市','怀化市',
        '长沙市','娄底市','石家庄市','邯郸市','唐山市',
        '呼和浩特','赤峰市','吉林','太原市','长治市',
        '运城市'
      ]
      var temp = citys.map(function(item){
        var tempObj = {
          name:item,
          dq:dqs[parseInt(Math.random()*3)]
        };
        
        for(var i=0;i<keys13.length;i++){
          tempObj[keys13[i]]=parseInt(Math.random()*40+60);
        }
        return tempObj
      });

      var qgObj = {
        name:'全国',
        dq:null,
      };
      
      for(var i=0;i<keys13.length;i++){
        qgObj[keys13[i]]=parseInt(Math.random()*40+60);
      }
      temp.unshift(qgObj)

      return temp;
    },
    provincesCombo(){
      var temp=[];
      for(var i=0;i<this.provinces.length;i++){
        temp.push({
          value:this.provinces[i],
          text:this.provincesText[i]
        });
      }
      return temp;
    },
    testCityData1(){
      return [{
        area:'常州市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'常州明都',
        msg:'96%---++-116%'
      },{
        area:'常州市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'常州欧派罗',
        msg:'96%---++-116%'
      },{
        area:'淮安市',
        isStar:true,
        upDown:parseInt(Math.random()*4),
        name:'淮安宏宇金驰',
        msg:'96%---++-116%'
      },{
        area:'连云港市',
        isStar:false,
        upDown:-1,
        name:'连云港盛资',
        msg:'96%---++-116%'
      },{
        area:'南京市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'江苏福联',
        msg:'96%---++-116%'
      },{
        area:'南京市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'南京福联',
        msg:'96%---++-116%'
      },{
        area:'南通市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'南通市-单位1',
        msg:'96%---++-116%'
      },{
        area:'南通市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'南通市-单位2',
        msg:'96%---++-116%'
      },{
        area:'南通市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'南通市-单位3',
        msg:'96%---++-116%'
      },{
        area:'苏州市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'苏州市-单位1',
        msg:'96%---++-116%'
      },{
        area:'苏州市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'苏州市-单位2',
        msg:'96%---++-116%'
      },{
        area:'苏州市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'苏州市-单位3',
        msg:'96%---++-116%'
      },{
        area:'苏州市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'苏州市-单位4',
        msg:'96%---++-116%'
      },{
        area:'宿迁市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'宿迁市-单位1',
        msg:'96%---++-116%'
      },{
        area:'泰州市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'泰州市-单位1',
        msg:'96%---++-116%'
      },{
        area:'无锡市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'无锡市-单位1',
        msg:'96%---++-116%'
      },{
        area:'无锡市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'无锡市-单位2',
        msg:'96%---++-116%'
      },{
        area:'无锡市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'无锡市-单位3',
        msg:'96%---++-116%'
      },{
        area:'无锡市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'无锡市-单位4',
        msg:'96%---++-116%'
      },{
        area:'徐州市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'徐州市-单位1',
        msg:'96%---++-116%'
      },{
        area:'盐城市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'盐城市-单位1',
        msg:'96%---++-116%'
      },{
        area:'盐城市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'盐城市-单位2',
        msg:'96%---++-116%'
      },{
        area:'盐城市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'盐城市-单位3',
        msg:'96%---++-116%'
      },{
        area:'扬州市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'扬州市-单位1',
        msg:'96%---++-116%'
      },{
        area:'镇江市',
        isStar:false,
        upDown:parseInt(Math.random()*4),
        name:'镇江市-单位1',
        msg:'96%---++-116%'
      }];
    },
    testCityData2(){
      var keys13=['ytd','one','two','thr','for','fiv','six','svn','eit','nine','ten','elv','twl'];
      var areas=[
        '全国','江苏','苏州市','南京市','无锡市','南通市',
        '徐州市','常州市','淮安市','扬州市'
      ]
      var temp = areas.map(function(item){
        var tempObj = {
          name:item,
          isStar:false
        };
        
        for(var i=0;i<keys13.length;i++){
          tempObj[keys13[i]]=parseInt(Math.random()*40+60);
        }
        return tempObj
      });
      temp[8].isStar = false;

      return temp;
    },
  },
  data() {
    return {
      loading: false,
      selYear:new Date().getFullYear(),
      selMonth:new Date().getMonth()+1,
      queryYear:new Date().getFullYear(),
      queryMonth:new Date().getMonth()+1,
      provinces:['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'],
	    provincesText:['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'],
      selProvince:'shanghai',
      queryProvince:'shanghai',
    }
  },
  methods:{
    searchPage(){
      this.queryYear = this.selYear;
      this.queryMonth = this.selMonth;
    },
    searchProvince(){
      this.queryProvince = this.selProvince;
    }
  }
}
</script>

<style lang="less">
@import url('./style.less');
</style>